<template>
	<div class="insert_div">
		
		<div class="bottom_div">
			<!-- 搜索结果 -->
			<div v-for="req in reqList" class="user_cls">
				<div style="width: 100%; display: flex; margin-left: 20px; align-items: center;">
					<el-image class="header_cls2" :src="$.getImg(req.header)" fit="cover"></el-image>
					<div style="display: flex;flex-direction: column; align-items: flex-start; margin-left: 20px; justify-content: space-evenly; height: 100%;">
						<span>{{req.nickname}}</span>
						<span style="font-size: 12px; color: gray;">验证消息：{{req.info}}</span>
						<span style="font-size: 12px; color: gray;">申请时间：{{req.createTime}}</span>
					</div>
				</div>
				<div v-if="req.status == 0" style="display: flex; flex-direction: row-reverse;">
					<el-button style="margin-right: 20px;" type="danger" size="small" @click="handlerReqs(req.id, 2)">拒绝</el-button>
					<el-button style="margin-right: 20px;" type="success" size="small" @click="openDialog(req.id)">通过</el-button>
				</div>
				<div v-if="req.status == 1" style="display: flex; flex-direction: row-reverse;">
					<span style="margin-right: 20px; color: green;">请求已经通过</span>
				</div>
				<div v-if="req.status == 2" style="display: flex; flex-direction: row-reverse;">
					<span style="margin-right: 20px; color: red;">请求已经拒绝</span>
				</div>
			</div>
		</div>
		
		<!-- 好友申请的弹窗 -->
		<el-dialog
		  title="好友申请"
		  :visible.sync="dialogVisible"
		  :close-on-click-modal = "false"
		  width="30%">
		  <el-input v-model="form.beizhu" placeholder="好友的备注"/>
		  <span slot="footer" class="dialog-footer">
		    <el-button @click="dialogVisible = false">取 消</el-button>
		    <el-button type="primary" @click="handlerReqs(form.id, form.status)">通过申请</el-button>
		  </span>
		</el-dialog>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				defaultHeader: require("@/assets/header.png"),
				//申请者列表
				reqList:[],
				//弹窗是否弹出的标志
				dialogVisible: false,
				//表单参数
				form: {
					id: "",
					status: "",
					beizhu: ""
				}
			}
		},
		methods: {
			//打开弹窗
			openDialog(id) {
				this.form.id = id;
				this.form.status = 1;//已通过
				//弹出框
				this.dialogVisible = true;
			},
			//查询我的所有申请
			queryMyRequest(){
				this.$.ajax({
					url: "/friendRequest/query4me",
					success: (data) => {
						this.reqList = data;
					}
				});
			},
			//处理申请
			handlerReqs(id, status){
				this.$.ajax({
					type: "POST",
					url: "/friendRequest/handler",
					data: {
						id: id,
						status: status,
						beizhu: this.form.beizhu
					},
					success: (data) => {
						//关闭弹窗
						this.dialogVisible = false;
						
						//重新发送请求获取列表
						this.queryMyRequest();
					}
				});
			}
		},
		mounted(){
			//页面加载时，就查询发送给我的申请
			this.queryMyRequest();
		}
	}
</script>

<style>
	.insert_div {
		width: 100%;
		height: 100%;
		padding: 20px;
		box-sizing: border-box;
	}
	
	.bottom_div {
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
		width: 100%;
		flex-wrap: wrap;
		margin-top: 20px;
	}
	
	.user_cls {
		width: 30%;
		height: 150px;
		margin: 10px;
		box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
		border-radius: 10px;
		background-color: white;
		display: flex;
		flex-direction: column;
		justify-content: space-evenly;
	}
	
	.header_cls2 {
		width: 80px;
		height: 80px;
		border-radius: 40px;
		box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
	}
</style>